<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rope Curve</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .rootBox{
            width: 500px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .ctlBox{
            width: 100%;
            margin-top: 10px;
            display: flex;
            justify-content: center;
            button{
                padding: 5px 10px;
                margin: 0 5px;
                border: 1px solid #ccc;
                cursor: pointer;
            }
        }
        canvas {
            border: 1px solid #ccc;
            width: 400px;
            height: 300px;
        }
        .inputhk{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="rootBox">
            
        <div class="ctlBox" id="text-yj" style="margin-bottom: 10px;">
            当前模式：圆角模式
        </div>
        <canvas id="canvas" width="800" height="600"></canvas>
        <div class="ctlBox">
            <button onClick="chooseImg()">
                切换图片
            </button>
            <button onClick="chooseYJfn()">
                圆角模式
            </button>
            <button onClick="chooseDWfn()">
                切换点位
            </button>
            <button onClick="chooseAverage()">
                平均切割
            </button>
            <button onClick="choosePointShow()">
                显示控制点
            </button>
        </div>
        <div class="ctlBox">
            线宽调节
            <input class="inputhk" type="range" min="1" max="100" value="30" oninput="drawWidthChange(this.value)">
        </div>
        <div class="ctlBox">
            单段弧长调节
            <input class="inputhk" type="range" min="1" max="50" value="2" oninput="unitLengthChange(this.value)">
        </div>
        <div class="ctlBox">
            贝塞尔长度调节（非圆角模式下）
            <input class="inputhk" type="range" min="1" max="300" value="30" oninput="bezierChange(this.value)">
        </div>
        <div class="ctlBox">
            圆角调节（圆角模式下）
            <input class="inputhk" type="range" min="1" max="100" value="30" oninput="radiusChange(this.value)">
        </div>
    </div>
    <script type="module">
        import { drawRope } from "./node_modules/draw-rope/index.js";
        // Example usage
        var canvas = document.getElementById("canvas");
        var imgSrc = './rope.png';
        var _drawWidth = 30;
        var _unitLength = 1;
        var _bezierNum = 100;
        var _needRadius = true;
        var _radius = 80;
        var _showControlPoint = true;
        var _average = true;

        var pwArr_test = [
                { x: 20, y: 50 },
                { x: 300, y: 50 },
                { x: 300, y: 500 },
                // { x: 60, y: 500 },
            ];
        radiusChange();

        //绘制宽度
        function drawWidthChange(val){
            _drawWidth = val;
            drawSth();
        }
        window.drawWidthChange = drawWidthChange;

        //单段弧长调节
        function unitLengthChange(val){
            _unitLength = val;
            drawSth();
        }
        window.unitLengthChange = unitLengthChange;

        //bezierNum调节
        function bezierChange(val){
            _bezierNum = val;
            drawSth();
        }
        window.bezierChange = bezierChange;

        //绘制圆角半径
        function radiusChange(val){
            _radius = val;
            drawSth();
        }
        window.radiusChange = radiusChange;

        //切换控制点显示
        function showControlPoint(){
            _showControlPoint = !_showControlPoint;
            drawSth();
        }
        window.showControlPoint = showControlPoint;

        //切换平均分割模式
        function chooseAverage(){
            _average = !_average;
            drawSth();
        }
        window.chooseAverage = chooseAverage;

        //切换控制点显示
        function choosePointShow(){
            _showControlPoint = !_showControlPoint;
            drawSth();
        }
        window.choosePointShow = choosePointShow;

        //切换圆角模式
        function chooseYJfn(){
            _needRadius = !_needRadius;
            var text = _needRadius ? '圆角模式' : '非圆角模式';
            document.getElementById('text-yj').innerText = '当前模式：' + text;
            drawSth();
        }
        window.chooseYJfn = chooseYJfn;

        // 切换图片
        function chooseImg(){
            if(imgSrc == './rope.png'){
                imgSrc = './rope1.png';
            }else{
                imgSrc = './rope.png';
            }
            drawSth();
        }
        window.chooseImg = chooseImg;
           
        function chooseDWfn(){
            if(window.index_p_a === undefined){
                window.index_p_a = 0;
            }
            var index = window.index_p_a++;
            if(window.index_p_a == 4){
                window.index_p_a = 0;
            }

            switch(index){
                case 0:
                pwArr_test = [
                        { x: 20, y: 30 },
                        { x: 200, y: 120 },
                        { x: 280, y: 500 },
                        { x: 480, y: -300 },
                        { x: 780, y: 100 },
                        { x: 380, y: 200 },
                        { x: 180, y: 500 },
                        { x: 480, y: 600 },
                        { x: 680, y: 300 },
                    ];
                    break;
                case 1:
                    pwArr_test = [
                        { x: 20, y: 50 },
                        { x: 300, y: 50 },
                        { x: 300, y: 500 },
                        { x: 60, y: 500 },
                    ];
                    break;
                case 2:
                    pwArr_test = [
                        { x: 120, y: 50 },
                        { x: 400, y: 50 },
                        { x: 400, y: 500 },
                        { x: 120, y: 500 },
                        { x: 120, y: 100 },
                    ];
                    break;
                case 3:
                    pwArr_test = [
                        { x: 380, y: 200 },
                        { x: 30, y: 250 },
                        { x: 70, y: 400 },
                        { x: 220, y: 200 },
                        { x: 380, y: 100 },
                        { x: 400, y: 400 },
                    ];
                    break;
            }
            drawSth();
        }
        window.chooseDWfn = chooseDWfn;


        function drawSth(){
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawRope({
                canvas: canvas,
                ropeImageUrl: imgSrc,
                pwArr: pwArr_test,
                drawWidth: _drawWidth,
                unitLength: _unitLength,
                bezierNum: _bezierNum,
                needRadius:_needRadius,
                radius: _radius,
                average: _average,
                showControlPoint: _showControlPoint
            });
        }
    </script>
 
   
</body>
</html>
